<!DOCTYPE html>

<html class="js cssanimations">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>点餐DEMO</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link href="css/style.css" rel="stylesheet">
<style type="text/css">
.shop {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 50px;
    background: #070f1a;
    transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.shop .shopico {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    float: left;
    background: #070f1a;
    margin: -15px 0 0 10px;
}
.shop .shopico i {
    width: 50px;
    height: 50px;
    background: url(images/shop.png) no-repeat;
    background-size: contain;
    display: inline-block;
    margin: 8px 0 0 10px;
    overflow: hidden;
    border-radius: 50px;
}
.shop .shopprice {
    float: left;
    line-height: 50px;
    font-size: 18px;
    font-weight: bold;
    color: #FFF;
    margin-left: 10px;
}
.shop .shopbut {
    background: #f55331;
    float: right;
    color: #FFF;
    font-size: 16px;
    font-weight: bold;
    line-height: 50px;
    padding: 0 20px;
}
.shop .numspan {
    position: absolute;
    top: -5px;
    right: 5px;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    color: #FFF;
    border-radius: 50%;
    background: -webkit-linear-gradient(left top, #f07c49, #ff0000); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, #f07c49, #ff0000); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, #f07c49, #ff0000); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, #f07c49, #ff0000); /* 标准的语法 */
}
.mask {
    width: 100%;
    background: #000;
    opacity: 0.5;
    top: 0;
    height: 100%;
    display: none;
    position: fixed;
}
.popup {
    position: fixed;
    width: 100%;
    height: 300px;
    background: #FFF;
    bottom: -300px;
    transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.popup .uptitle {
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    border-bottom: solid 1px #f9f9f9;
}
.popup .uptitle span {
    font-size: 16px;
    color: #000;
}
.popup .uptitle .tb {
    height: 16px;
    line-height: 20px;
    font-size: 13px;
    float: right;
    margin: 0;
    background: url(images/del.png) no-repeat left center;
    background-size: contain;
    padding-left: 20px;
    color: #a1a1a1;
    margin: 13px 0 0 0;
}
.popup .uplist {
    width: 100%;
    height: 270px;
    overflow-y: scroll;
}
.popup .uplist ul li {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 10px 0;
}
.popup .uplist .uppic {
    width: 80px;
    height: auto;
    float: left;
    margin: 10px 10px 10px 15px;
}
.popup .uplist .listtitle {
    width: 40%;
    float: left;
    margin: 10px 0 0 0;
    line-height: 25px;
}
.popup .uplist .listtitle h1 {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}
.popup .uplist .listtitle h2 {
    font-size: 14px;
    font-weight: bold;
    color: #f60002;
}
.popup .uplist .listright {
    width: 30%;
    height: auto;
    float: right;
    margin: 20px 0 0 0;
}
.popup .uplist .listright span {
    display: block;
    width: 30px;
    height: 30px;
    float: left;
}
.popup .uplist .listright p {
    width: 30px;
    float: left;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
}
.addnum {
    background: url(images/jiah.png) no-repeat;
    background-size: contain;
}
.lessnum {
    background: url(images/jianh.png) no-repeat;
    background-size: contain;
}
</style>
</head>
<body style="">
<div class="header">
  <div class="leftlogo"></div>
  <div class="righttitle">
    <h1>xxx酒店</h1>
    <h2>海淀区交大东路186号永大中心5号楼A口3层</h2>
  </div>
  <div class="bulletin"><span class="bulletin-title"></span>公告信息公告信息公告信息公告信息公告信息</div>
</div>
<div class="swiper-container"> 
  <!--<ul class="swiper-container-ul" style="">
      <li class="swiper-container-ul-li actives">商品</li>
      <li class="swiper-container-ul-li">店铺</li>
    </ul>-->
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="content" style="height: 2216px;">
        <div id="left" class="left" style="">
          <ul>
            <li class="active">凉菜</li>
            <li class="">粤菜</li>
            <li class="">川菜</li>
            <li class="">北方菜</li>
            <li class="">主食</li>
          </ul>
        </div>
        <div id="right" class="right" style="">
          <ul>
            <li>
              <div class="class-title">凉菜</div>
              <div>
                <div class="item">
                  <div class="item-left">
                    <div class="item-img"><img src="images/p1.jpg"></div>
                  </div>
                  <div class="item-right">
                    <div class="title">葱油拌面</div>
                    <div class="price">¥ 32 元</div>
                  </div>
                  <div class="item-ico addnum"></div>
                </div>
              </div>
              <div>
                <div class="item">
                  <div class="item-left">
                    <div class="item-img"><img src="images/p1.jpg"></div>
                  </div>
                  <div class="item-right">
                    <div class="title">葱油拌面</div>
                    <div class="price">¥ 32 元</div>
                  </div>
                  <div class="item-ico addnum"></div>
                </div>
              </div>
              <div>
                <div class="item">
                  <div class="item-left">
                    <div class="item-img"><img src="images/p1.jpg"></div>
                  </div>
                  <div class="item-right">
                    <div class="title">葱油拌面</div>
                    <div class="price">¥ 32 元</div>
                  </div>
                  <div class="item-ico addnum"></div>
                </div>
              </div>
              <div>
                <div class="item">
                  <div class="item-left">
                    <div class="item-img"><img src="images/p1.jpg"></div>
                  </div>
                  <div class="item-right">
                    <div class="title">葱油拌面</div>
                    <div class="price">¥ 32 元</div>
                  </div>
                  <div class="item-ico addnum"></div>
                </div>
              </div>
            </li>
            <li>
              <div class="class-title">粤菜</div>
              <div>
                <div class="item">
                  <div class="item-left">
                    <div class="item-img"><img src="images/p1.jpg"></div>
                  </div>
                  <div class="item-right">
                    <div class="title">葱油拌面</div>
                    <div class="price">¥ 32 元</div>
                  </div>
                </div>
              </div>
              <div>
                <div class="item">
                  <div class="item-left">
                    <div class="item-img"><img src="images/p1.jpg"></div>
                  </div>
                  <div class="item-right">
                    <div class="title">葱油拌面</div>
                    <div class="price">¥ 32 元</div>
                  </div>
                  <div class="item-ico addnum"></div>
                </div>
              </div>
              <div>
                <div class="item">
                  <div class="item-left">
                    <div class="item-img"><img src="images/p1.jpg"></div>
                  </div>
                  <div class="item-right">
                    <div class="title">葱油拌面</div>
                    <div class="price">¥ 32 元</div>
                  </div>
                  <div class="item-ico addnum"></div>
                </div>
              </div>
            </li>
            <li>
              <div class="class-title">川菜</div>
              <div>
                <div class="item">
                  <div class="item-left">
                    <div class="item-img"><img src="images/p1.jpg"></div>
                  </div>
                  <div class="item-right">
                    <div class="title">葱油拌面</div>
                    <div class="price">¥ 32 元</div>
                  </div>
                  <div class="item-ico addnum"></div>
                </div>
              </div>
              <div>
                <div class="item">
                  <div class="item-left">
                    <div class="item-img"><img src="images/p1.jpg"></div>
                  </div>
                  <div class="item-right">
                    <div class="title">葱油拌面</div>
                    <div class="price">¥ 32 元</div>
                  </div>
                  <div class="item-ico addnum"></div>
                </div>
              </div>
              <div>
                <div class="item">
                  <div class="item-left">
                    <div class="item-img"><img src="images/p1.jpg"></div>
                  </div>
                  <div class="item-right">
                    <div class="title">葱油拌面</div>
                    <div class="price">¥ 32 元</div>
                  </div>
                  <div class="item-ico addnum"></div>
                </div>
              </div>
            </li>
            <li>
              <div class="class-title">北方菜</div>
              <div>
                <div class="item">
                  <div class="item-left">
                    <div class="item-img"><img src="images/p1.jpg"></div>
                  </div>
                  <div class="item-right">
                    <div class="title">葱油拌面</div>
                    <div class="price">¥ 32 元</div>
                  </div>
                  <div class="item-ico addnum"></div>
                </div>
              </div>
              <div>
                <div class="item">
                  <div class="item-left">
                    <div class="item-img"><img src="images/p1.jpg"></div>
                  </div>
                  <div class="item-right">
                    <div class="title">葱油拌面</div>
                    <div class="price">¥ 32 元</div>
                  </div>
                  <div class="item-ico addnum"></div>
                </div>
              </div>
              <div>
                <div class="item">
                  <div class="item-left">
                    <div class="item-img"><img src="images/p1.jpg"></div>
                  </div>
                  <div class="item-right">
                    <div class="title">葱油拌面</div>
                    <div class="price">¥ 32 元</div>
                  </div>
                  <div class="item-ico addnum"></div>
                </div>
              </div>
            </li>
            <li>
              <div class="class-title">主食</div>
              <div>
                <div class="item">
                  <div class="item-left">
                    <div class="item-img"><img src="images/p1.jpg"></div>
                  </div>
                  <div class="item-right">
                    <div class="title">葱油拌面</div>
                    <div class="price">¥ 32 元</div>
                  </div>
                  <div class="item-ico addnum"></div>
                </div>
              </div>
              <div>
                <div class="item">
                  <div class="item-left">
                    <div class="item-img"><img src="images/p1.jpg"></div>
                  </div>
                  <div class="item-right">
                    <div class="title">葱油拌面</div>
                    <div class="price">¥ 32 元</div>
                  </div>
                  <div class="item-ico addnum"></div>
                </div>
              </div>
              <div>
                <div class="item">
                  <div class="item-left">
                    <div class="item-img"><img src="images/p1.jpg"></div>
                  </div>
                  <div class="item-right">
                    <div class="title">葱油拌面</div>
                    <div class="price">¥ 32 元</div>
                  </div>
                  <div class="item-ico addnum"></div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="mask"></div>
<div class="popup">
  <div class="uptitle"> <span>已选菜品</span>
    <div class="tb">清空</div>
  </div>
  <div class="uplist">
    <ul>
      <li>
        <div class="uppic"> <img src="images/p1.jpg"> </div>
        <div class="listtitle">
          <h1>葱油拌面</h1>
          <h2>￥ 32</h2>
        </div>
        <div class="listright"> <span class="addnum"></span>
          <p>1</p>
          <span class="lessnum"></span> </div>
      </li>
      <li>
        <div class="uppic"> <img src="images/p1.jpg"> </div>
        <div class="listtitle">
          <h1>葱油拌面</h1>
          <h2>￥ 32</h2>
        </div>
        <div class="listright"> <span class="addnum"></span>
          <p>1</p>
          <span class="lessnum"></span> </div>
      </li>
      <li>
        <div class="uppic"> <img src="images/p1.jpg"> </div>
        <div class="listtitle">
          <h1>葱油拌面</h1>
          <h2>￥ 32</h2>
        </div>
        <div class="listright"> <span class="addnum"></span>
          <p>1</p>
          <span class="lessnum"></span> </div>
      </li>
      <li>
        <div class="uppic"> <img src="images/p1.jpg"> </div>
        <div class="listtitle">
          <h1>葱油拌面</h1>
          <h2>￥ 32</h2>
        </div>
        <div class="listright"> <span class="addnum"></span>
          <p>1</p>
          <span class="lessnum"></span> </div>
      </li>
      <li>
        <div class="uppic"> <img src="images/p1.jpg"> </div>
        <div class="listtitle">
          <h1>葱油拌面</h1>
          <h2>￥ 32</h2>
        </div>
        <div class="listright"> <span class="addnum"></span>
          <p>1</p>
          <span class="lessnum"></span> </div>
      </li>
    </ul>
  </div>
</div>
<div class="shop">
  <div class="shopico"> <i></i>
    <div class="numspan">3</div>
  </div>
  <div class="shopprice">¥ 80</div>
  <div class="shopbut">提交订单</div>
</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
  $(function(){
    $('.content').css('height',$('.right').height());
    $('.left ul li').eq(0).addClass('active');
    $(window).scroll(function(){
      if($(window).scrollTop() >= 150){
        $('.swiper-container-ul').css('position','fixed');
        $('.left').css('position','fixed');
        $('.right').css('margin-left',$('.left').width());
      }else {
        $('.swiper-container-ul').css('position','');
        $('.left').css('position','');
        $('.right').css('margin-left','');
      };
      //滚动到标杆位置,左侧导航加active
      $('.right ul li').each(function(){
        var target = parseInt($(this).offset().top-$(window).scrollTop()-150);
		//alert(target);
        var i = $(this).index();
        if (target<=0) {
          $('.left ul li').removeClass('active');
          $('.left ul li').eq(i).addClass('active');
        }
      });
    });
    $('.left ul li').click(function(){
      var i = $(this).index('.left ul li');
      $('body, html').animate({scrollTop:$('.right ul li').eq(i).offset().top-40},500);
    });
	//购物车点击
	$('.shop').click(function(){
      $('.mask').show();
	  $('.popup').css("bottom","50px");
    });
	$('.mask').click(function(){
      $('.mask').hide();
	  $('.popup').css("bottom","-300px");
    });
  });
  </script>
</body>
</html>